<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="content-wrapper" th:fragment="subject-list" >
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            题库管理
            <small>题库</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Tables</a></li>
            <li class="active">Data tables</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">

                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">所有题目</h3>

                    </div>
                    <!--添加操作-->
                    <div class="row" style="margin-bottom: 10px">
                    <div class="col-sm-10">

                    </div>
                    <div class="col-sm-2">
                        <a href="/subject/addSubject"><button class="btn btn-info">添加题目</button></a>&nbsp;<button class="btn btn-danger" id="deleteByIds">批量删除</button>
                    </div>
                </div>
                    <div class="box-body">

                        <table id="subject1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="checkall"></th>
                                <th>ID</th>
                                <th>题目</th>
                                <th>选项</th>
                                <th>答案</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                           <tbody>
                           <!--<tr th:each="user,staus:${users}">-->
                               <!--<td th:text="${staus.count}">1</td>-->
                           <tr th:each="subject : ${subjects}">
                               <td><input type="checkbox" id="1" th:id="${subject.Id}"></td>
                               <td th:text="${subject.Id}">ID</td>
                               <td th:text="${subject.problem}">题目</td>
                               <td th:text="${subject.options}">选项</td>
                               <td th:text="${subject.ans}">答案</td>
                               <!--<td th:text="${#dates.format(user.hiredate,'yyyy-MM-dd')}">2019-01-24</td>-->
                               <td>
                                    <button class="btn btn-warning btn-xs btn_myupdate">编辑</button>
                                   <a href="#" th:href="@{/subject/deleteById(id=${subject.Id})}"><button class="btn btn-danger btn-xs btn_mydelete">删除</button></a>
                               </td>
                           </tr>

                           </tbody>

                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    <script>
        $(function () {
            $('#subject1').DataTable({
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "没有找到记录",
                    "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)"
                },
                "ordering": false,             //禁用没有意义的排序
                "columnDefs": [
                    {"width": "10%", "targets":5}          //为操作列扩展宽度
                ]
            });

            //为删除按钮添加询问是否删除
            $('#subject1').on("click", ".btn_mydelete", function () {
                var ans = confirm("确定要删除这条题目吗？");
                if(ans) return true;
                else return false;
            })

            //全选全不选
            $("#checkall").click(function () {
                $(":checkbox").prop("checked", $("#checkall").prop("checked"));

            });

            //批量删除
            var ids = new Array();
            var index = 0;
            $("#deleteByIds").click(function () {
                if($(":checked").length == 0){
                    alert("没有勾选任何题目！！！");
                }
                else{
                    var ans = confirm("确定要删除这些题目吗？");
                    if(ans){
                        $(":checked:not(#checkall)").each(function () {
                            ids[index] = $(this).prop("id");
                            index++;
                        })
                    }
                    var data = {"ids":ids.toString()};
                    $.ajax({
                        url: '/subject/deleteByIds',
                        type: 'get',
                        contentType: 'application/json',
                        data: data,
                        dataType: 'json',
                        cache: false,
                        timeout: 600000,
                        success: function (data) {
                            alert(data);
                        }
                    });
                }
                
            });

        })
    </script>
</div>
